<template>
	<view :class="screen?'bg-conten container':'bg-conten'">
		<uv-navbar v-if="!isPc" title="邮箱或手机注册" @leftClick="leftClick" leftIconSize="0px"
			:placeholder="true"></uv-navbar>
		<view class="login-login">
			<uv-row customStyle="margin-bottom: 10px">
				<uv-col span="4"></uv-col>
				<uv-col span="4" align="center">
					<uv-image src="../../static/logo.svg" width="100px" height="100px">
						<template v-slot:error>
							<view style="font-size: 48rpx;">{{appName}}</view>
						</template>
					</uv-image>
				</uv-col>
				<uv-col span="4"></uv-col>
			</uv-row>
			<uv-form labelPosition="top" :model="model1" :rules="rules" ref="form">
				<uv-form-item label="手机号或邮箱" prop="username" label-width="150px" :customStyle="{fontWeight: 'bold',}">
					<uv-input placeholder="请输入手机号码或邮箱" border="bottom" v-model="model1.username">
						<!-- vue3模式下必须使用v-slot:suffix -->
						<template v-slot:suffix>
							<uv-code ref="uCode" @change="codeChange" :seconds="seconds" changeText="X秒后重新获取"></uv-code>
							<uv-button @click="getCode" :text="codeTips" type="success"></uv-button>
						</template>
					</uv-input>
				</uv-form-item>
				<uv-form-item label="验证码" prop="code" label-width="150px" :customStyle="{fontWeight: 'bold',}">
					<uv-input placeholder="请输入验证码" v-model="model1.code">
						<!-- vue3模式下必须使用v-slot:prefix -->
						<!-- <template v-slot:prefix>
							<uv-text text="验证码:" margin="0 3px 0 0" type="tips"></uv-text>
						</template> -->
						<!-- vue3模式下必须使用v-slot:prefix -->
						<template v-slot:suffix>
							<uv-parse v-if="captchaImg" :content="captchaImg"></uv-parse>
						</template>
					</uv-input>
				</uv-form-item>
				<uv-form-item label="设置密码" prop="password" label-width="150px" :customStyle="{fontWeight: 'bold',}">
					<uv-input placeholder="请输入密码" border="surround" v-model="model1.password" password
						clearable></uv-input>
				</uv-form-item>
				<uv-form-item label="重复确认密码" prop="pwd" label-width="150px" :customStyle="{fontWeight: 'bold',}">
					<uv-input placeholder="确认密码" border="surround" v-model="model1.pwd" password clearable></uv-input>
				</uv-form-item>
			</uv-form>
			<uv-button type="primary" :text="this.type?'修 改':'注 册'" shape="circle"
				:customStyle="{fontWeight: 'bold', backgroundColor: '#4CB6CB',marginBottom:'20px'}"
				@click="submit"></uv-button>
			<!-- <uv-popup ref="popup" mode="bottom" @change="change">
					<view style="width: 100%;">
						<uv-text align="center" text="找回密码"></uv-text>
						<uv-text align="center" text="账号申诉"></uv-text>
					</view>
				</uv-popup> -->
			<uv-row customStyle="margin-top: 0px;">
				<uv-col span="3"></uv-col>
				<uv-col span="3" align="center">
				</uv-col>
				<uv-col span="3"></uv-col>
				<uv-col span="3" align="right" @click="routed('login/index')">密码登录</uv-col>
			</uv-row>
		</view>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	// 引入配置
	import config from '@/common/config'
	import {
		register,
		sendCode,
		getUser
	} from '@/common/api.js';
	export default {
		data() {
			return {
				appName: config.appName,
				scrollTop: 0,
				codeTips: "",
				seconds: '',
				type: '',
				model1: {
					username: "",
					password: "",
					pwd: "",
					code: "",
				},
				captchaImg: '',
				rules: {
					'username': {
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						min: 6,
						max: 20,
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
					'pwd': [{
						type: 'string',
						min: 6,
						max: 20,
						required: true,
						message: '请再次填写密码',
						trigger: ['blur', 'change']
					}, {
						// 自定义验证函数，见上说明，注意这里面的逻辑不能出现语法报错，否则可能导致不验证
						validator: (rule, value, callback) => {
							// 此处业务逻辑省略
							// 返回true表校验通过，返回false表示不通过
							// console.log(value)
							return this.model1.password == value ? true : false;
						},
						message: '两次密码不一样',
						trigger: ['blur']
					}],
					'code': {
						type: 'string',
						required: true,
						message: '请填写收到的验证码',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad(e) {
			if (e.goback) {
				uni.$uv.vuex('goback', e.goback);
			}
			if (e.inviteCode) {
				uni.$uv.vuex('inviteCode', e.inviteCode);
			}
			if (e.type) {
				this.type = e.type;
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		methods: {
			getuser() {
				var that = this;
				if (this.vuex_token) {
					getUser({
						custom: {
							auth: true,
							catch: false,
						}
					}).then(e => {
						that.$uv.vuex('vuex_user', e);
					}).catch(e => {})
				}
			},
			open() {
				this.$refs.popup.open();
			},
			change(e) {
				console.log('弹窗状态改变：', e);
			},
			click(name) {
				this.$refs.toast.show({
					icon: 'none',
					title: `点击了第${name}个`
				})
			},
			codeChange(text) {
				this.codeTips = text;
			},
			finish(e) {
				console.log('输入结束，当前值为：' + e);
			},
			getCode() {
				var that = this;
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					that.$refs.toast.show({
						type: 'loading',
						message: "正在加载"
					});
					sendCode({
						custom: {
							auth: false
						},
						params: {
							username: this.model1.username,
							type: this.type ? this.type : 'login'
						},
					}).then(e => {
						setTimeout(() => {
							// 这里此提示会被this.start()方法中的提示覆盖
							that.$refs.toast.show({
								message: '验证码已发送'
							})
							// 通知验证码组件内部开始倒计时
							that.seconds = e.fail_time;
							that.captchaImg = e.img;
							that.$refs.uCode.start();
						}, 2000);
						// console.log(that.captchaImg);
					}).catch(e => {
						// 861339046@qq.com
						console.log(e)
						if (e.message) {
							that.$refs.toast.show({
								message: e.message
							})
						}
					})
				} else {
					that.$refs.toast.show({
						message: '倒计时结束后再发送'
					});
				}
			},
			// 提交
			submit() {
				var that = this;
				uni.$uv.toast("发送中...");
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form.validate().then(res => {
					register({
						type: this.type,
						username: that.model1.username,
						password: that.model1.password,
						pwd: that.model1.pwd,
						code: that.model1.code,
						inviteCode: that.inviteCode,
					}).then(e => {
						// console.log(e);
						that.$refs.toast.show({
							message: '注册成功！',
						})
						if (e.login) {
							that.routed('login/index');
						} else {
							that.$uv.vuex('vuex_token', that.aes_encrypt(e.token));
							that.$uv.vuex('refreshToken', that.aes_encrypt(e.refreshToken));
							setTimeout(function() {
								that.getuser();
							}, 1000)
							that.routes(that.goback);
						}
					}).catch(e => {
						that.$refs.toast.show({
							message: '注册失败！',
						})
						console.log(e);
					})
				}).catch(errors => {
					that.$refs.toast.show({
						icon: 'error',
						message: '校验失败!'
					});
				})
			},
			routed(url) {
				// 调用
				this.routes('pages/' + url);
			},
			routes(url) {
				// 调用
				uni.$uv.route({
					url: url || config.indexUrl.replace(/^\//, ''),
				});
			},
		}
	}
</script>

<style lang="scss">
	.bg-conten {
		// background-color: #CED7E1;
		// background: url(../../static/yuanhua/login.jpg);
		height: 100vh;
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		/* 使容器的高度为视窗的100% */
	}

	.login-login {
		background-color: #fff;
		margin-top: 10px;
		padding: 10px;

		.uv-code-input {
			margin-bottom: 10px;
		}

		.uv-text {
			margin-left: 20px;
			margin-bottom: 20px;
		}

		::v-deep .uv-button {
			// margin: 40px;
			background-color: #69C0FF;
		}

		.uv-popup {
			::v-deep .uv-text {
				padding: 20px;
			}
		}

	}

	// 测试
	.bg-purple {
		background: #CED7E1;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
</style>